<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>Title</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }

        div {
            margin: 20px;
        }

        label {
            font-weight: bold;
        }

        input[type="text"],
        input[type="password"] {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-top: 5px;
        }

        button {
            padding: 10px 20px;
            background-color: #007bff;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 10px;
        }

        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>

<div>
    <label>用户名</label>
    <input type="text" id="userName" placeholder="请输入用户名">
</div>
<div>
    <label>密码</label>
    <input type="password" id="password" placeholder="请输入密码">
</div>
<button onclick="login()">登录</button>
<button onclick="goToAnotherPage()">跳转到另一个页面</button>

</body>
<script src="https://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    function login() {
        //获取用户名和密码
        let userName = $("#userName").val();
        let password = $("#password").val();
        if (checkData(userName, password)) {
            $.ajax({
                url: 'customer/login',
                type: 'post',
                data: {userName, password},
                dataType: 'json',
                success(res) {
                    if (res.code === 0) {
                        //登录成功，跳转到主页
                        window.location.href='${contextPath}/customer_account/home'
                    } else {
                        alert(res.msg)
                    }
                }
            })
        }
    }

    function checkData(userName, pwd) {
        if (userName == null || userName === '') {
            alert("用户名不能为空")
            return false;
        }
        if (pwd == null || pwd === '') {
            alert('密码不能为空');
            return false;
        }

        return true;
    }
    function goToAnotherPage() {
        window.location.href = '${contextPath}/withdrawal_records/list';
    }
</script>
</html>